<script setup lang="ts">
import YiButton from "@renderer/components/yi-button.vue";
import YiInput from "@renderer/components/yi-input.vue";
import YiSlider from "@renderer/components/yi-slider.vue";
import {ref} from "vue";

const HWND = ref(null)
window.api.on('getWindow', (e, hwnd) => {
    HWND.value = hwnd
})
const alpha = ref(128)
const setTransparent = async () => {
    if (HWND.value === null)
    {
        window.api.showError(['错误','请先获取窗口句柄'])
        return
    }
    console.log(HWND.value)
    await window.api.setTransparent([HWND.value,alpha.value])
}
</script>

<template>
    <div class="main">
        <yi-input class="input" v-model="HWND">ctrl+alt+N获取鼠标位置窗口句柄</yi-input>
        <div class="slider">
            <div>透明度</div>
            <yi-slider v-model="alpha"></yi-slider>
        </div>

        <yi-button class="button" @click="setTransparent">设置窗口透明</yi-button>
    </div>
</template>
<style scoped>
.main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main .input {
    margin-top: 60px;
    transform: translateX(-20px);
}

.main .button {
    margin-top: 20px;
}

.main .slider {
    margin-top: 20px;
    width: 60%;
}
</style>

